<template>
  <transition name="el-zoom-in-top" appear>
    <el-card shadow="hover" class="chart-stat-card">
      <div class="title">
        <i :class="icon" style="font-size: 16px"></i>
        {{title}}
      </div>
      <div class="number">
        <animated-number :value="number" :precision="precision" />
        <span class="unit">{{unitText}}</span>
      </div>
    </el-card>
  </transition>
</template>

<script>
import AnimatedNumber from '@/components/AnimatedNumber';

export default {
  components: {
    AnimatedNumber
  },
  props: {
    icon: String,
    title: String,
    number: null,
    unitText: String,
    ...AnimatedNumber.props
  }
}
</script>

<style scoped>
.el-card {
  position: relative;
  cursor: pointer;
}

.title {
  text-align: left;
  color: #909399;
  font-size: 14px;
}

.number {
  margin-top: 12px;
  text-align: left;
  color: #303133;
  font-size: 30px;
}

.unit {
  color: #909399;
  font-size: 14px;
  vertical-align: middle;
}
</style>